<template>
  <div class="formPlan mt-80" :class="[setSize == 1 ? 'usual' : 'large']">
    <div
      style="
        background: #fff;
        position: fixed;
        right: 0;
        top: 100px;
        padding: 0 3px;
        z-index: 2;
      "
    >
      <ul>
        <li
          class="cursor-pointer"
          @click="handleControl('restore')"
          style="padding: 0 5px"
        >
          <div style="border-bottom: 1px solid #d3d3d3; padding-top: 10px">
            <i class="el-icon-refresh-left" size="16"></i>
          </div>
        </li>
        <li
          class="cursor-pointer"
          @click="handleControl('enlarge')"
          style="padding: 0 5px"
        >
          <div style="border-bottom: 1px solid #d3d3d3; padding-top: 10px">
            <i class="el-icon-plus" size="16"></i>
          </div>
        </li>
        <li
          class="cursor-pointer"
          @click="handleControl('norrow')"
          style="padding: 0 5px"
        >
          <div style="border-bottom: 1px solid #d3d3d3; padding-top: 10px">
            <i class="el-icon-minus" size="16"></i>
          </div>
        </li>
        <li>
          <div
            style="
              background: #fff;
              position: fixed;
              right: 0;
              bottom: 10px;
              z-index: 2;
            "
          ></div>
        </li>
      </ul>
    </div>
    <el-container>
      <div class="aside-bus-info" v-if="isSchemeList">
        <!-- 搜索 -->
        <el-card class="box-card mb-10">
          <div class="d-flex">
            <div style="width: 100%">
              <div class="current-local">
                <el-input
                  v-model="inputStart"
                  :placeholder="$t('langName.langName21')"
                  clearable
                  class="input-lineNo"
                  @input="handleStartAddress"
                  @blur="handleChangeStartInput"
                  @clear="handleClearStartInput"
                  id="pac-startInput"
                  ref="pac-startInput"
                ></el-input>
              </div>
              <div class="turn-direction">
                <div class="three-dotted"></div>
                <el-button icon="el-icon-sort" @click="changeDirection"></el-button>
              </div>
              <div class="destination">
                <el-input
                  v-model="inputEnd"
                  :placeholder="$t('langName.langName22')"
                  clearable
                  class="input-lineNo"
                  @input="handleEndAddress"
                  @blur="handleChangeEndInput"
                  @clear="handleClearEndInput"
                  id="pac-endInput"
                  ref="pac-endInput"
                ></el-input>
              </div>
              <el-button
                :type="setTheme == 1 ? 'primary' : 'danger'"
                class="btn"
                @click="getDistance"
              >
                {{ $t("langName.langName24") }}</el-button
              >
            </div>
          </div>
        </el-card>
        <!-- 方案列表 -->
        <div
          class="localInfo border-radius-20 route-planning-box"
          style="position: relative"
          v-if="isRouteList"
        >
          <!-- 到站信息 -->
          <el-tabs v-model="activeName" style="width: 100%">
            <!-- 时间短 -->
            <el-tab-pane :label="$t('langName.langName96')" name="first">
              <el-collapse
                v-model="accordionName"
                accordion
                v-if="ByBusTimesList.length"
                @change="handleToDetail"
              >
                <el-collapse-item
                  :name="index"
                  v-for="(item, index) in ByBusTimesList"
                  :key="index"
                >
                  <template slot="title">
                    <div>
                      <div class="time-Style">
                        <!-- 分钟 米-->
                        {{ item.sumTravelTime
                        }}{{ $t("langName.langName41") }}&nbsp;&nbsp;
                        <!-- 步行，图标 -->
                        <img src="@/assets/images/work.png" />{{
                          item.sumWalkDistance
                        }}{{ $t("langName.langName95") }}&nbsp;&nbsp;
                      </div>
                      <div class="route-style">
                        <div v-for="(i, index) in item.routeList" :key="index">
                          <span v-if="i.length">
                            {{ i[0].routename }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </template>

                  <div class="left-route-planning">
                    <!-- 我的位置 planDel-->
                    <div class="del">
                      <div class="bus-stop-name mb-10 mt-10">
                        <div class="blue-cicle">
                          <img src="@/assets/images/1.png" />
                        </div>
                        <div class="bus-stop-name ml-40">
                          {{
                            startAddress
                              ? startAddress
                              : $t("langName.langName47")
                          }}
                        </div>
                      </div>

                      <ul v-for="(i, index) in item.routes" :key="index">
                        <!-- 步行 -->
                        <li class="bus-stop-name" v-if="index == 0">
                          <div class="dotted-solid"></div>
                          <div class="stated-num ml-40">
                            <span class="text-gray"
                              >{{ $t("langName.langName48")
                              }}{{ item.originWalkDistance
                              }}{{ $t("langName.langName95") }}
                              {{ $t("langName.langName49")
                              }}{{ item.originWalkTime
                              }}{{ $t("langName.langName41") }}</span
                            >
                          </div>
                        </li>

                        <!-- 换成公交 -->
                        <li class="mb-10">
                          <!-- //开始站点 -->
                          <div class="d-flex">
                            <div class="blue-cicle">
                              <img src="@/assets/images/2.png" />
                            </div>
                            <div class="ml-20">
                              <div class="mb-10">
                                {{ i[0].stationname }}
                              </div>
                              <div class="text-gray fz-12">
                                {{ i[0].routename }}
                              </div>
                            </div>
                          </div>
                          <!-- //中间站 -->
                          <div class="d-flex">
                            <div>
                              <div
                                class="bus-line"
                                style="margin-left: 18px"
                                :style="{
                                  height: (i.length + 1) * 30 + 'px',
                                }"
                              ></div>
                            </div>
                            <div class="ml-40" style="margin-bottom: 30px">
                              <div class="stated-num text-gray cursor-pointer">
                                <span
                                  >{{ $t("langName.langName51") }}
                                  {{ i.length - 1
                                  }}{{ $t("langName.langName40") }} ({{
                                    index == 0
                                      ? item.busTime
                                      : index == 1
                                      ? item.nextBusTime
                                      : item.lastBusTime
                                  }}{{ $t("langName.langName41") }})</span
                                >
                                <!-- <div class="arrow-size ml-20">
                                          <img
                                            :src="
                                              item[0].isShowStation
                                                ? require('@/assets/images/shangjiantou.png')
                                                : require('@/assets/images/xiajiantou.png')
                                            "
                                          />
                                        </div> -->
                              </div>
                              <div>
                                <div v-for="(option, index) in i" :key="index">
                                  <div
                                    class="end-cicle"
                                    v-if="index == i.length - 1"
                                  ></div>
                                  <div
                                    :style="{
                                      marginTop:
                                        index == i.length - 1
                                          ? '-20px'
                                          : '10px',
                                    }"
                                  >
                                    {{ option.stationname }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- // 结束站点 -->
                          <!-- <div class="d-flex">
                            <div class="end-cicle"></div>
                            <div class="ml-20">
                              {{ i[i.length - 1].stationname }}
                            </div>
                          </div> -->

                          <!-- //步行-->
                          <div class="d-flex">
                            <div style="width: 40px">
                              <div class="dotted-solid"></div>
                            </div>
                            <div class="stated-num">
                              <span
                                class="text-gray"
                                v-if="item.routes.length == 3"
                                >{{ $t("langName.langName48")
                                }}{{
                                  index == 0
                                    ? item.transferDistance
                                    : index == 1
                                    ? item.nextTransferDistance
                                    : item.destWalkDistance
                                }}{{ $t("langName.langName95") }}
                                {{ $t("langName.langName49")
                                }}{{
                                  index == 0
                                    ? item.transferTime
                                    : index == 1
                                    ? item.nextTransferTime
                                    : item.destWalkTime
                                }}{{ $t("langName.langName41") }}</span
                              >
                              <span
                                class="text-gray"
                                v-if="item.routes.length == 2"
                                >{{ $t("langName.langName48")
                                }}{{
                                  index == 0
                                    ? item.transferDistance
                                    : item.destWalkDistance
                                }}{{ $t("langName.langName95") }}
                                {{ $t("langName.langName49")
                                }}{{
                                  index == 0
                                    ? item.transferTime
                                    : item.destWalkTime
                                }}{{ $t("langName.langName41") }}</span
                              >
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- 结束位置 -->
                      <div class="d-flex mb-10">
                        <div style="height: 20px; height: 20px">
                          <div class="blue-cicle"></div>
                        </div>

                        <div class="ml-20">{{ endAddressRight }}</div>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <div v-else class="h-400">
                <el-empty :description="$t('langName.langName106')"></el-empty>
              </div>
            </el-tab-pane>
            <!-- 少步行 -->
            <el-tab-pane :label="$t('langName.langName97')" name="second">
              <el-collapse
                v-model="accordionName1"
                accordion
                v-if="ByWalkDistanceList.length"
                @change="handleToDetail"
              >
                <el-collapse-item
                  :name="index"
                  v-for="(item, index) in ByWalkDistanceList"
                  :key="index"
                >
                  <template slot="title">
                    <div>
                      <div class="time-Style">
                        <!-- 分钟 米-->
                        {{ item.sumTravelTime
                        }}{{ $t("langName.langName41") }}&nbsp;&nbsp;
                        <img src="@/assets/images/work.png" />{{
                          item.sumWalkDistance
                        }}{{ $t("langName.langName95") }}
                      </div>
                      <div class="route-style">
                        <div v-for="(i, index) in item.routeList" :key="index">
                          <span v-if="i.length">
                            {{ i[0].routename }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </template>

                  <div class="left-route-planning">
                    <!-- 我的位置 planDel-->
                    <div class="del">
                      <div class="bus-stop-name mb-10 mt-10">
                        <div class="blue-cicle"></div>
                        <div class="bus-stop-name ml-40">
                          {{
                            startAddress
                              ? startAddress
                              : $t("langName.langName47")
                          }}
                        </div>
                      </div>

                      <ul v-for="(i, index) in item.routes" :key="index">
                        <!-- 步行 -->
                        <li class="bus-stop-name" v-if="index == 0">
                          <div class="dotted-solid"></div>
                          <div class="stated-num ml-40">
                            <span class="text-gray"
                              >{{ $t("langName.langName48")
                              }}{{ item.originWalkDistance
                              }}{{ $t("langName.langName95") }}
                              {{ $t("langName.langName49")
                              }}{{ item.originWalkTime
                              }}{{ $t("langName.langName41") }}</span
                            >
                          </div>
                        </li>

                        <!-- 换成公交 -->
                        <li class="mb-10">
                          <!-- //开始站点 -->
                          <div class="d-flex">
                            <div class="blue-cicle">
                              <img src="@/assets/images/2.png" />
                            </div>
                            <div class="ml-20">
                              <div class="mb-10">
                                {{ i[0].stationname }}
                              </div>
                              <div class="text-gray fz-12">
                                {{ i[0].routename }}
                              </div>
                            </div>
                          </div>
                          <!-- //中间站 -->
                          <div class="d-flex">
                            <div>
                              <div
                                class="bus-line"
                                style="margin-left: 18px"
                                :style="{
                                  height: (i.length + 1) * 30 + 'px',
                                }"
                              ></div>
                            </div>
                            <div class="ml-40" style="margin-bottom: 30px">
                              <div class="stated-num text-gray cursor-pointer">
                                <span
                                  >{{ $t("langName.langName51") }}
                                  {{ i.length - 1
                                  }}{{ $t("langName.langName40") }} ({{
                                    index == 0
                                      ? item.busTime
                                      : index == 1
                                      ? item.nextBusTime
                                      : item.lastBusTime
                                  }}{{ $t("langName.langName41") }})</span
                                >
                                <!-- <div class="arrow-size ml-20">
                                          <img
                                            :src="
                                              item[0].isShowStation
                                                ? require('@/assets/images/shangjiantou.png')
                                                : require('@/assets/images/xiajiantou.png')
                                            "
                                          />
                                        </div> -->
                              </div>
                              <div>
                                <div v-for="(option, index) in i" :key="index">
                                  <div
                                    class="end-cicle"
                                    v-if="index == i.length - 1"
                                  ></div>
                                  <div
                                    :style="{
                                      marginTop:
                                        index == i.length - 1
                                          ? '-20px'
                                          : '10px',
                                    }"
                                  >
                                    {{ option.stationname }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- // 结束站点 -->
                          <!-- <div class="d-flex">
                            <div class="end-cicle"></div>
                            <div class="ml-20">
                              {{ i[i.length - 1].stationname }}
                            </div>
                          </div> -->

                          <!-- //步行-->
                          <div class="d-flex">
                            <div style="width: 40px">
                              <div class="dotted-solid"></div>
                            </div>
                            <div class="stated-num">
                              <span
                                class="text-gray"
                                v-if="item.routes.length == 3"
                                >{{ $t("langName.langName48")
                                }}{{
                                  index == 0
                                    ? item.transferDistance
                                    : index == 1
                                    ? item.nextTransferDistance
                                    : item.destWalkDistance
                                }}{{ $t("langName.langName95") }}
                                {{ $t("langName.langName49")
                                }}{{
                                  index == 0
                                    ? item.transferTime
                                    : index == 1
                                    ? item.nextTransferTime
                                    : item.destWalkTime
                                }}{{ $t("langName.langName41") }}</span
                              >
                              <span
                                class="text-gray"
                                v-if="item.routes.length == 2"
                                >{{ $t("langName.langName48")
                                }}{{
                                  index == 0
                                    ? item.transferDistance
                                    : item.destWalkDistance
                                }}{{ $t("langName.langName95") }}
                                {{ $t("langName.langName49")
                                }}{{
                                  index == 0
                                    ? item.transferTime
                                    : item.destWalkTime
                                }}{{ $t("langName.langName41") }}</span
                              >
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- 结束位置 -->
                      <div class="d-flex mb-10">
                        <div style="height: 20px; height: 20px">
                          <div class="blue-cicle"></div>
                        </div>

                        <div class="ml-20">{{ endAddressRight }}</div>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <div v-else class="h-400">
                <el-empty :description="$t('langName.langName106')"></el-empty>
              </div>
            </el-tab-pane>
            <!-- 少换乘 -->
            <el-tab-pane :label="$t('langName.langName98')" name="third">
              <el-collapse
                v-model="accordionName2"
                accordion
                v-if="ByTravelTimeList.length"
                @change="handleToDetail"
              >
                <el-collapse-item
                  :name="index"
                  v-for="(item, index) in ByTravelTimeList"
                  :key="index"
                >
                  <template slot="title">
                    <div>
                      <div class="time-Style">
                        <!-- 分钟 米-->
                        {{ item.sumTravelTime
                        }}{{ $t("langName.langName41") }}&nbsp;&nbsp;
                        <img src="@/assets/images/work.png" />{{
                          item.sumWalkDistance
                        }}{{ $t("langName.langName95") }}
                      </div>
                      <div class="route-style">
                        <div v-for="(i, index) in item.routeList" :key="index">
                          <span v-if="i.length">
                            {{ i[0].routename }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </template>

                  <div class="left-route-planning">
                    <!-- 我的位置 planDel-->
                    <div class="del">
                      <div class="bus-stop-name mb-10 mt-10">
                        <div class="blue-cicle"></div>
                        <div class="bus-stop-name ml-40">
                          {{
                            startAddress
                              ? startAddress
                              : $t("langName.langName47")
                          }}
                        </div>
                      </div>

                      <ul v-for="(i, index) in item.routes" :key="index">
                        <!-- 步行 -->
                        <li class="bus-stop-name" v-if="index == 0">
                          <div class="dotted-solid"></div>
                          <div class="stated-num ml-40">
                            <span class="text-gray"
                              >{{ $t("langName.langName48")
                              }}{{ item.originWalkDistance
                              }}{{ $t("langName.langName95") }}
                              {{ $t("langName.langName49")
                              }}{{ item.originWalkTime
                              }}{{ $t("langName.langName41") }}</span
                            >
                          </div>
                        </li>

                        <!-- 换成公交 -->
                        <li class="mb-10">
                          <!-- //开始站点 -->
                          <div class="d-flex">
                            <div class="blue-cicle">
                              <img src="@/assets/images/2.png" />
                            </div>
                            <div class="ml-20">
                              <div class="mb-10">
                                {{ i[0].stationname }}
                              </div>
                              <div class="text-gray fz-12">
                                {{ i[0].routename }}
                              </div>
                            </div>
                          </div>
                          <!-- //中间站 -->
                          <div class="d-flex">
                            <div>
                              <div
                                class="bus-line"
                                style="margin-left: 18px"
                                :style="{
                                  height: (i.length + 1) * 30 + 'px',
                                }"
                              ></div>
                            </div>
                            <div class="ml-40" style="margin-bottom: 30px">
                              <div class="stated-num text-gray cursor-pointer">
                                <span
                                  >{{ $t("langName.langName51") }}
                                  {{ i.length - 1
                                  }}{{ $t("langName.langName40") }} ({{
                                    index == 0
                                      ? item.busTime
                                      : index == 1
                                      ? item.nextBusTime
                                      : item.lastBusTime
                                  }}{{ $t("langName.langName41") }})</span
                                >
                                <!-- <div class="arrow-size ml-20">
                                          <img
                                            :src="
                                              item[0].isShowStation
                                                ? require('@/assets/images/shangjiantou.png')
                                                : require('@/assets/images/xiajiantou.png')
                                            "
                                          />
                                        </div> -->
                              </div>
                              <div>
                                <div v-for="(option, index) in i" :key="index">
                                  <div
                                    class="end-cicle"
                                    v-if="index == i.length - 1"
                                  ></div>
                                  <div
                                    :style="{
                                      marginTop:
                                        index == i.length - 1
                                          ? '-20px'
                                          : '10px',
                                    }"
                                  >
                                    {{ option.stationname }}
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- // 结束站点 -->
                          <!-- <div class="d-flex">
                            <div class="end-cicle"></div>
                            <div class="ml-20">
                              {{ i[i.length - 1].stationname }}
                            </div>
                          </div> -->

                          <!-- //步行-->
                          <div class="d-flex">
                            <div style="width: 40px">
                              <div class="dotted-solid"></div>
                            </div>
                            <div class="stated-num">
                              <span
                                class="text-gray"
                                v-if="item.routes.length == 3"
                                >{{ $t("langName.langName48")
                                }}{{
                                  index == 0
                                    ? item.transferDistance
                                    : index == 1
                                    ? item.nextTransferDistance
                                    : item.destWalkDistance
                                }}{{ $t("langName.langName95") }}
                                {{ $t("langName.langName49")
                                }}{{
                                  index == 0
                                    ? item.transferTime
                                    : index == 1
                                    ? item.nextTransferTime
                                    : item.destWalkTime
                                }}{{ $t("langName.langName41") }}</span
                              >
                              <span
                                class="text-gray"
                                v-if="item.routes.length == 2"
                                >{{ $t("langName.langName48")
                                }}{{
                                  index == 0
                                    ? item.transferDistance
                                    : item.destWalkDistance
                                }}{{ $t("langName.langName95") }}
                                {{ $t("langName.langName49")
                                }}{{
                                  index == 0
                                    ? item.transferTime
                                    : item.destWalkTime
                                }}{{ $t("langName.langName41") }}</span
                              >
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- 结束位置 -->
                      <div class="d-flex mb-10">
                        <div style="height: 20px; height: 20px">
                          <div class="blue-cicle"></div>
                        </div>

                        <div class="ml-20">{{ endAddressRight }}</div>
                      </div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
              <div v-else class="h-400">
                <el-empty :description="$t('langName.langName106')"></el-empty>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <!-- 出行详情 -->

      <!-- 地图 -->
      <div class="route-map">
        <div id="map"></div>
      </div>
    </el-container>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { postRoutePlanning, getDistance } from "@/api/collect";
import {
  getGoogleAddress,
  getGoogleLngAntLat,
  getzw,
  getDirections,
} from "@/utils/location";
var axios = require("axios");
export default {
  name: "formPlan",
  data() {
    return {
      accordionName: "",
      accordionName1: "",
      accordionName2: "",
      activeName: "first",
      map: null,
      inputStart: "", //输入起始地址
      inputEnd: "", //输入终点地址
      startlngAndLat: "", //转换后的起始经纬度
      endlngAndLat: "", //转换后的终点经纬度
      resultRouteLists: {},
      WalkDistance: 2360,

      ByBusTimesList: [],
      ByTravelTimeList: [],
      ByWalkDistanceList: [],
      isSchemeList: true,
      points: [],
      transferStationLists: [],
      isRouteList: false,
      routeNameList: [],
      lineLayer: null, // 线图层
      pointLayer: null, // 点图层
      pointLayer1: null, // 点图层
      stationLength: 150,
      allTripLists: [],
      page: 1,
      state: "",
      setSize: 1,
      setTheme: "",
      endAddress: "",
      startAddress: "",
      startPointLayer: null,
      endPointLayer: null,
      tempArr: [],
      transferPoint: [],
      transferPointLayer: null,
      pointFeature: [],
      lineFeature: [],
      planDel: {},
      flightPath: null,
      flightWorkPath: null,
      flightWork1Path: null,
      flightWork2Path: null,
      markers: [],
      endAddressRight:'',//完整结束地址
      isStartClear: false,
      isEndClear: false,
    };
  },
  computed: {
    ...mapState(["lnglat", "changeSize", "changeTheme"]),
  },
  watch: {
    lnglat() {
      this.resultRouteLists = [];
      this.isRouteList = false;
      this.tempArr = [];
      this.inputStart = "";
      this.inputEnd = "";
      this.startlngAndLat = "";
      this.endlngAndLat = "";

      if (this.transferPointSource) {
        this.transferPointSource.removeFeature(this.pointFeature);
        this.map.removeLayer(this.transferPointLayer); //清除换乘位置
      }
      if (this.startPointSource) {
        this.startPointSource.removeFeature(this.startPointFeature);
        this.map.removeLayer(this.startPointLayer); //清除起始位置
      }
      if (this.endPointSource) {
        this.endPointSource.removeFeature(this.endPointFeature);
        this.map.removeLayer(this.endPointLayer); //清除结束位置
      }

      if (this.linesSource) {
        this.tempArr = [];
        this.linesSource.clear();
      }

      this.initMap();
    },
    changeSize: {
      handler(newVal) {
        this.setSize = newVal;
      },
    },
    changeTheme(newVal) {
      this.setTheme = newVal;
    },
  },
  created() {
    // 获取本地主题色，设置网站颜色/主题弹框按钮位置
    this.setTheme = localStorage.getItem("setTheme")
      ? localStorage.getItem("setTheme")
      : "1";
  },
  mounted() {
    // 文字大小
    this.setSize = this.$store.state.changeSize;
    // 网站风格
    this.setTheme = localStorage.getItem("setTheme")
      ? localStorage.getItem("setTheme")
      : "1";
    // 获取当前位置
    let p = {
      lng: this.$store.state.lnglat[0],
      lat: this.$store.state.lnglat[1],
    };
    this.startlngAndLat = p.lng + "," + p.lat;
    // 我的位置
    this.inputStart = this.$t("langName.langName99");
    this.initMap();
    // var currentLocation = new google.maps.LatLng(0, 0);
    // this.map.setCenter(currentLocation);
    // console.log(currentLocation);
    this.markerStart = new google.maps.Marker({
      position: {
        lat: Number(this.startlngAndLat.split(",")[1]),
        lng: Number(this.startlngAndLat.split(",")[0]),
      },
      title: this.inputStart,
      icon: {
        url: require("../assets/images/1.png"),
        scaledSize: new google.maps.Size(30, 35),
      },
      map: this.map,
    });
    this.accordionName = "";
    this.accordionName1 = "";
    this.accordionName2 = "";
    this.activeName = "first";
    // this.initMap1();
  },
  methods: {
    // 初始化地图
    initMap() {
      const origin = {
        lat: this.$store.state.lnglat[1],
        lng: this.$store.state.lnglat[0],
      };
      const map = new google.maps.Map(document.getElementById("map"), {
        zoom: window.MAPSETTINGS.DEFAULTZOOM,
        center: origin,
        zoomControl: false,
        streetViewControl: false,
        fullscreenControl: false,
        mapTypeControl: false,
      });
      this.origin = origin;
      this.map = map;
      var rendererOptions = {
        draggable: true,
        polylineOptions: {
          strokeColor: "red",
        },
      };
      this.directionsService = new google.maps.DirectionsService();
      this.directionsRenderer = new google.maps.DirectionsRenderer(
        rendererOptions
      );
      this.directionsRenderer.setMap(map);
      this.placesService = new google.maps.places.PlacesService(map);
      // this.infowindow = new google.maps.InfoWindow();
      // this.infowindowContent = document.getElementById("infowindow-content");
      // this.infowindow.setContent(this.infowindowContent);
      this.map.addListener("click", this.handleClick);
      //  const mapDiv = document.getElementById("map");
      // google.maps.event.addDomListener(mapDiv, "click", this.handleClick);
    },
    // 点击地图
    handleClick(event) {
      event.stop(); // 去除地图点击时默认弹窗效果
      console.log("点位信息",event)
      this.getlatLngInformation( event.latLng);
      // this.getPlaceInformation(event.placeId, event.latLng);
    },
    //根据经纬度转为具体地址并且绘制标记点（新）（可标记任意地点）
    getlatLngInformation(latlng) {
      var geocoder;
      const that = this;
      let address = JSON.parse(JSON.stringify(latlng, null, 2));
      geocoder = new google.maps.Geocoder();
      geocoder.geocode({'location': latlng}, function(results, status) {
        if (status === 'OK') {
          if (results[0]) {
            console.log('results',results);
            let tempLnglat = `${address.lng},${address.lat}`;
          if (that.inputStart && that.inputEnd) {
            that.markerStart.setMap(null);
            that.markerEnd.setMap(null);
            that.inputStart = results[0].formatted_address;
            that.startlngAndLat = tempLnglat;
            that.inputEnd = "";
            that.endlngAndLat = "";
            // 绘制开始位置
            that.getDrawStart();
          } else {
            if (!that.inputStart) {
              that.inputStart = results[0].formatted_address;
              that.startlngAndLat = tempLnglat;
              // 绘制开始位置
              that.getDrawStart();
            } else {
              that.inputEnd = results[0].formatted_address;
              that.endlngAndLat = tempLnglat;
              // 绘制结束位置
              that.getDrawEnd();
            }
          }
            // alert("地址：" + results[0].formatted_address);
          } else {
            alert('未找到地址');
          }
        } else {
          alert('地理编码失败: ' + status);
        }
      });
    },
    //根据经纬度转为具体地址并且绘制标记点(旧)（非地标缺少placeid无法标记）
    getPlaceInformation(placeId, latlng) {

      const that = this;
      let address = JSON.parse(JSON.stringify(latlng, null, 2));
      this.placesService.getDetails({ placeId: placeId }, (place, status) => {
        //根据placeid将经纬度转为具体地址名称
        if (
          status === "OK" &&
          place &&
          place.geometry &&
          place.geometry.location
        ) {
          let tempLnglat = `${address.lng},${address.lat}`;
          if (that.inputStart && that.inputEnd) {
            that.markerStart.setMap(null);
            that.markerEnd.setMap(null);
            that.inputStart = place.name;
            that.startlngAndLat = tempLnglat;
            that.inputEnd = "";
            that.endlngAndLat = "";
            // 绘制开始位置
            that.getDrawStart();
          } else {
            if (!that.inputStart) {
              that.inputStart = place.name;
              that.startlngAndLat = tempLnglat;
              // 绘制开始位置
              that.getDrawStart();
            } else {
              that.inputEnd = place.name;
              that.endlngAndLat = tempLnglat;
              // 绘制结束位置
              that.getDrawEnd();
            }
          }
        }
      });
    },
     //切换起始点和终点
     changeDirection(){
      let start = this.inputStart
      let end = this.inputEnd
      let startLat = this.endlngAndLat
      let endLat = this.startlngAndLat
      // let m_start = this.
      this.inputStart = end
      this.inputEnd = start
      this.startlngAndLat = startLat, //转换后的起始经纬度
      this.endlngAndLat = endLat, //转换后的终点经纬度
      // this.markerStart = m_start;
      // this.markerEnd = m_end;
      this.handleStartAddress()
      this.handleEndAddress()
      this.getDrawStart()
      this.getDrawEnd()
    },
    // 输入起始位置-- 获取输入的起始经纬度
    async handleStartAddress() {
      if (!this.inputStart) {
        this.handleClearStartInput();
      }
      this.getzw("pac-startInput");
      let address = await getGoogleLngAntLat(this.inputStart);
      this.startlngAndLat = `${address.lng},${address.lat}`;
    },
    // 输入结束位置-- 获取输入的结束经纬度
    async handleEndAddress() {
      if (!this.inputEnd) {
        this.handleClearEndInput();
      }
      this.getzw("pac-endInput");
      let address = await getGoogleLngAntLat(this.inputEnd);
      this.endlngAndLat = `${address.lng},${address.lat}`;
    },
    // 起始位置输入框失去焦点后绘制标记点
    handleChangeStartInput() {
      this.getDrawStart();
    },
    // 结束位置输入框失去焦点后绘制标记点
    handleChangeEndInput() {
      this.getDrawEnd();
    },
    // 绘制开始位置
    getDrawStart() {
      if (this.inputStart) {
        if (this.markerStart) {
          this.markerStart.setMap(null);
        }
        this.markerStart = new google.maps.Marker({
          position: {
            lat: Number(this.startlngAndLat.split(",")[1]),
            lng: Number(this.startlngAndLat.split(",")[0]),
          },
          title: this.inputStart,
          icon: {
            url: require("../assets/images/1.png"),
            scaledSize: new google.maps.Size(30, 35),
          },
          map: this.map,
        });
      }
    },
    // 绘制结束位置
    getDrawEnd() {
      if (this.inputEnd) {
        if (this.markerEnd) {
          this.markerEnd.setMap(null);
        }
        this.markerEnd = new google.maps.Marker({
          position: {
            lat: Number(this.endlngAndLat.split(",")[1]),
            lng: Number(this.endlngAndLat.split(",")[0]),
          },
          title: this.inputEnd,
          icon: {
            url: require("../assets/images/4.png"),
            scaledSize: new google.maps.Size(30, 35),
          },
          map: this.map,
        });
      }
    },
    // 输入时自动补全地址
    getzw(id) {
      const input = document.getElementById(id);
      const options = {
        fields: ["formatted_address", "geometry", "name"],
        strictBounds: false,
        types: ["establishment"],
      };
      const autocomplete = new google.maps.places.Autocomplete(input, options);
      autocomplete.addListener("place_changed", () => {
        const place = autocomplete.getPlace();
        this.endAddressRight = place.name
        let address = JSON.parse(
          JSON.stringify(place.geometry, null, 2)
        ).location;
        if (id == "pac-startInput") {
          this.startlngAndLat = address.lng + "," + address.lat;
        } else {
          this.endlngAndLat = address.lng + "," + address.lat;
        }
      });
    },
    // 清空开始位置输入框
    handleClearStartInput() {
      this.markerStart.setMap(null);
    },
    // 清空结束位置输入框
    handleClearEndInput() {
      this.markerEnd.setMap(null);
    },

    initMap1(start1, end1) {
      const directionsRenderer = new google.maps.DirectionsRenderer();
      const directionsService = new google.maps.DirectionsService();
      directionsRenderer.setMap(this.map);
      // "35.96939293796699,120.23111343383789"
      // "35.97793672297864,120.2025318145752"
      const start = start1;
      const end = end1;
      return new Promise(function (resolve, reject) {
        directionsService
          .route({
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.WALKING,
          })
          .then((response) => {
            // resolve(response.routes[0].legs[0].steps);
            resolve(response.routes[0].overview_path);
            // directionsRenderer.setDirections(response);
          });
      });
    },

    handleToDetail() {
      this.handleBcak();
      if (this.activeName == "first") {
        this.planDel = this.ByBusTimesList[this.accordionName];
      } else if (this.activeName == "second") {
        this.planDel = this.ByWalkDistanceList[this.accordionName1];
      } else {
        this.planDel = this.ByTravelTimeList[this.accordionName2];
      }
      if (this.accordionName !== "") {
        this.drawSpot();
        this.drawLine();
      } else if (this.accordionName1 !== "") {
        this.drawSpot();
        this.drawLine();
      } else if (this.accordionName2 !== ""){
        this.drawSpot();
        this.drawLine();
      }
    },
    // 返回清空线路
    handleBcak() {
      if (this.flightPath) {
        this.flightPath.setMap(null);
      }
      if (this.flightPath1) {
        this.flightPath1.setMap(null);
      }
      if (this.flightWorkPath) {
        this.flightWorkPath.setMap(null);
      }
      if (this.flightWork1Path) {
        this.flightWork1Path.setMap(null);
      }
      // 中间步行
      if (this.flightWork2Path) {
        this.flightWork2Path.setMap(null);
      }

      this.setMapOnAll(null);
      this.markers = [];
      this.isSchemeList = true;
    },

    setMapOnAll(map) {
      for (let i = 0; i < this.markers.length; i++) {
        this.markers[i].setMap(map);
      }
    },

    // 搜索
    async getDistance() {
      this.accordionName = "";
      this.accordionName1 = "";
      this.accordionName2 = "";
      this.activeName = "first";

      if (!this.inputStart) {
        this.$message.warning(this.$t("langName.langName55"));
        return;
      }
      if (!this.inputEnd) {
        this.$message.warning(this.$t("langName.langName56"));
        return;
      }
      if (this.inputStart == this.inputEnd) {
        this.$message.warning(this.$t("langName.langName107"));
        return;
      }
      let params = {
        start: this.startlngAndLat,
        end: this.endlngAndLat,
      };
      //            this.map.setCenter({
      //   lat: Number(this.startlngAndLat.split(",")[1]),
      //   lng: Number(this.startlngAndLat.split(",")[0]),
      // });
      // this.map.setZoom(window.MAPSETTINGS.DEFAULTZOOM);

      let { status, data, message } = await postRoutePlanning(params);
      if (status == 200) {
        if (data.length == 0) return [];
        this.resultRouteLists = data;
        let obj = [];
        let routeLists = [];
        this.resultRouteLists.ByBusTimes.forEach((option) => {
          routeLists = [];
          option.routes.forEach((item) => {
            obj = [];
            item.forEach((i, index) => {
              this.$set(i, "isShowStation", false);
              this.$set(i, "stationLength", (item.length + 1) * 30);
              if (index != 0 && index != item.length - 1) {
                obj.push(i);
              }
            });
            routeLists.push(obj);
          });
          this.$set(option, "routeList", routeLists);
        });

        this.resultRouteLists.ByTravelTime.forEach((option) => {
          routeLists = [];
          option.routes.forEach((item) => {
            obj = [];
            item.forEach((i, index) => {
              this.$set(i, "isShowStation", false);
              this.$set(i, "stationLength", (item.length + 1) * 30);
              if (index != 0 && index != item.length - 1) {
                obj.push(i);
              }
            });
            routeLists.push(obj);
          });
          this.$set(option, "routeList", routeLists);
        });
        this.resultRouteLists.ByWalkDistance.forEach((option) => {
          routeLists = [];
          option.routes.forEach((item) => {
            obj = [];
            item.forEach((i, index) => {
              this.$set(i, "isShowStation", false);
              this.$set(i, "stationLength", (item.length + 1) * 30);
              if (index != 0 && index != item.length - 1) {
                obj.push(i);
              }
            });
            routeLists.push(obj);
          });
          this.$set(option, "routeList", routeLists);
        });

        this.ByBusTimesList = this.resultRouteLists.ByBusTimes;
        this.ByTravelTimeList = this.resultRouteLists.ByTravelTime;
        this.ByWalkDistanceList = this.resultRouteLists.ByWalkDistance;
        this.isRouteList = true;
        this.endAddress = this.inputEnd;
        this.startAddress = this.inputStart;
      } else {
        this.$message.error(message);
      }
    },
    // 绘制开始位置、结束位置、换乘点
    drawSpot() {
      // 绘制标记点--开始标记,结束标记,换乘标记，公交标记
      // 公交标记
      this.planDel.routes.forEach((item, index) => {
        let marker = new google.maps.Marker({
          position: new google.maps.LatLng(item[0].latitude, item[0].longitude),
          title: item[0].stationname,
          icon: {
            url: require("../assets/images/2.png"),
            scaledSize: new google.maps.Size(30, 35),
          },
          map: this.map,
        });

        this.markers.push(marker);
        if (index > 0) {
          let marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(
              item[item.length - 1].latitude,
              item[item.length - 1].longitude
            ),
            title: item[item.length - 1].stationname,
            icon: {
              url: require("../assets/images/2.png"),
              scaledSize: new google.maps.Size(30, 35),
            },
            map: this.map,
          });
          this.markers.push(marker1);
        }

        // 换乘图标
        if (this.planDel.routes.length >= 2 && index % 2 == 0) {
          let marker1 = new google.maps.Marker({
            position: new google.maps.LatLng(
              item[item.length - 1].latitude,
              item[item.length - 1].longitude
            ),
            title: item[item.length - 1].stationname,
            icon: {
              url: require("../assets/images/3.png"),
              scaledSize: new google.maps.Size(30, 35),
            },
            map: this.map,
          });
          this.markers.push(marker1);
        }
      });
      // 开始位置
      //  start: this.startlngAndLat,
      // end: this.endlngAndLat,
      this.markerStart = new google.maps.Marker({
        // position: {
        //   lat: this.planDel.originStation.latitude,
        //   lng: this.planDel.originStation.longitude,
        // },
        position: {
          lat: Number(this.startlngAndLat.split(",")[1]),
          lng: Number(this.startlngAndLat.split(",")[0]),
        },
        title: this.inputStart,
        icon: {
          url: require("../assets/images/1.png"),
          scaledSize: new google.maps.Size(30, 35),
        },
        map: this.map,
      });
      // 信息窗体

      //        const infowindow = new google.maps.InfoWindow({
      //   content: '12',
      //   ariaLabel: "Uluru",
      // });
      //  infowindow.open({
      //     anchor: this.markerStart,
      //     map:this.map,
      //   });

      this.markers.push(this.markerStart);

      // 结束位置
      this.markerEnd = new google.maps.Marker({
        // position: {
        //   lat: this.planDel.destStation.latitude,
        //   lng: this.planDel.destStation.longitude,
        // },
        position: {
          lat: Number(this.endlngAndLat.split(",")[1]),
          lng: Number(this.endlngAndLat.split(",")[0]),
        },
        title: this.inputEnd,
        icon: {
          url: require("../assets/images/4.png"),
          scaledSize: new google.maps.Size(30, 35),
        },
        map: this.map,
      });
      this.markers.push(this.markerEnd);

      let tempTransfer = [];
      this.pointFeature = [];
      // 换乘
      this.tempArr.forEach((item, index) => {
        if (index % 2 != 0 && index != this.tempArr.length - 2) {
          tempTransfer.push(item[item.length - 1]);
        }
      });
    },
    // 绘制线路
    async drawLine() {
      const flightPlanCoordinates = [];
      const flightPlanCoordinates1 = [];
      // const flightPlanCoordinates = [
      //   { lat: 37.772, lng: -122.214 },
      //   { lat: 21.291, lng: -157.821 },
      //   { lat: -18.142, lng: 178.431 },
      //   { lat: -27.467, lng: 153.027 },
      // ];
      // 开始步行线路
      let s =
        this.startlngAndLat.split(",")[1] +
        "," +
        this.startlngAndLat.split(",")[0];
      let e =
        this.planDel.originStation.latitude +
        "," +
        this.planDel.originStation.longitude;
      let res = await this.initMap1(s, e);
      let pointWark = [];
      res.forEach((item) => {
        let obj = JSON.parse(JSON.stringify(item, null, 2));
        pointWark.push(obj);
      });
      pointWark.push({
        lat: this.planDel.originStation.latitude,
        lng: this.planDel.originStation.longitude,
      });

      this.flightWorkPath = new google.maps.Polyline({
        path: pointWark,
        geodesic: true,
        strokeColor: "#02B578",
        strokeOpacity: 1.0,
        strokeWeight: 6,
      });
      this.flightWorkPath.setMap(this.map);

      // 结束步行线路
      let s1 =
        this.planDel.destStation.latitude +
        "," +
        this.planDel.destStation.longitude;
      let e1 =
        this.endlngAndLat.split(",")[1] + "," + this.endlngAndLat.split(",")[0];
      let res1 = await this.initMap1(s1, e1);
      let pointWark1 = [];
      pointWark1.push({
        lat: this.planDel.destStation.latitude,
        lng: this.planDel.destStation.longitude,
      });
      res1.forEach((item) => {
        let obj = JSON.parse(JSON.stringify(item, null, 2));
        pointWark1.push(obj);
      });
      pointWark1.push({
        lat: Number(this.endlngAndLat.split(",")[1]),
        lng: Number(this.endlngAndLat.split(",")[0]),
      });
      this.flightWork1Path = new google.maps.Polyline({
        path: pointWark1,
        geodesic: true,
        strokeColor: "#02B578",
        strokeOpacity: 1.0,
        strokeWeight: 6,
      });
      this.flightWork1Path.setMap(this.map);
      // 第一条公交线路
      // this.planDel.routes[0].forEach((i) => {
      //   let obj = {
      //     lat: i.latitude,
      //     lng: i.longitude,
      //   };
      //   flightPlanCoordinates1.push(obj);
      // });
      this.planDel.routes[0].map((item) => {
        item.jwd.forEach(e => {
          if(e !== "null" && e != undefined){
            let obj = {
              lat: Number(e.split(",")[1]),
              lng: Number(e.split(",")[0]),
            };
            flightPlanCoordinates.push(obj);
          }
        });
      });
      this.flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: "#409eff",
        strokeOpacity: 1.0,
        strokeWeight: 6,
      });
      this.flightPath.setMap(this.map);

      // 第二条公交线路
      if (this.planDel.routes[1] && this.planDel.routes[1].length) {
        // this.planDel.routes[1].forEach((i) => {
        //   let obj = {
        //     lat: i.latitude,
        //     lng: i.longitude,
        //   };
        //   flightPlanCoordinates1.push(obj);
        // });
        this.planDel.routes[1].map((item) => {
          item.jwd.forEach(e => {
            if(e !== "null" && e != undefined){
              let obj = {
                lat: Number(e.split(",")[0]),
                lng: Number(e.split(",")[1]),
              };
              flightPlanCoordinates1.push(obj);
            }
          });
        });

        this.flightPath1 = new google.maps.Polyline({
          path: flightPlanCoordinates1,
          geodesic: true,
          strokeColor: "#409eff",
          strokeOpacity: 1.0,
          strokeWeight: 6,
        });
        this.flightPath1.setMap(this.map);
      }
      // 中间步行
      if (this.planDel.routes.length >= 2) {
        let s2 =
          this.planDel.routes[0][this.planDel.routes[0].length - 1].latitude +
          "," +
          this.planDel.routes[0][this.planDel.routes[0].length - 1].longitude;
        let e2 =
          this.planDel.routes[1][0].latitude +
          "," +
          this.planDel.routes[1][0].longitude;
        let res2 = await this.initMap1(s2, e2);
        let pointWark2 = [];
        pointWark2.push({
          lat: this.planDel.routes[0][this.planDel.routes[0].length - 1]
            .latitude,
          lng: this.planDel.routes[0][this.planDel.routes[0].length - 1]
            .longitude,
        });

        res2.forEach((item) => {
          let obj = JSON.parse(JSON.stringify(item, null, 2));
          pointWark2.push(obj);
        });
        pointWark2.push({
          lat: this.planDel.routes[1][0].latitude,
          lng: this.planDel.routes[1][0].longitude,
        });
        this.flightWork2Path = new google.maps.Polyline({
          path: pointWark2,
          geodesic: true,
          strokeColor: "#02B578",
          strokeOpacity: 1.0,
          strokeWeight: 6,
        });
        this.flightWork2Path.setMap(this.map);
      }
    },

    //地图相关操作(放大/缩小/复原)
    handleControl(name) {
      // let view = this.map.getView();
      switch (name) {
        case "enlarge":
          this.map.setZoom(this.map.getZoom() + 1);
          break;
        case "norrow":
          this.map.setZoom(this.map.getZoom() - 1);
          break;
        case "restore":
          this.map.setCenter({
            lat: this.$store.state.lnglat[1],
            lng: this.$store.state.lnglat[0],
          });
          this.map.setZoom(window.MAPSETTINGS.DEFAULTZOOM);
          break;
      }
    },
    // 前一行程
    handlePre() {
      this.page--;
      if (this.page < 0) {
        this.$message.error(this.$t("langName.langName53"));
        return;
      } else {
        this.inputStart = this.allTripLists[this.page].start; //获取起点地址
        this.inputEnd = this.allTripLists[this.page].end; //获取终点地址
        this.stationLength = this.allTripLists[this.page].stationLength; //乘坐的站数
        this.resultRouteLists = this.allTripLists[this.page].data; //线路规划数据
      }
    },
    // 后一行程
    handleNext() {
      this.page++;
      if (this.page >= this.allTripLists.length) {
        this.$message.error(this.$t("langName.langName54"));
        return;
      } else {
        this.inputStart = this.allTripLists[this.page].start; //获取起点地址
        this.inputEnd = this.allTripLists[this.page].end; //获取终点地址
        this.stationLength = this.allTripLists[this.page].stationLength; //乘坐的站数
        this.resultRouteLists = this.allTripLists[this.page].data; //线路规划数据
      }
    },
  },
  deactivated() {
    this.flightPath.setMap(null);
    this.flightWorkPath.setMap(null);
    this.flightWork1Path.setMap(null);
    this.setMapOnAll(null);
    this.markers = [];
    this.isSchemeList = true;
  },
};
</script>
<style lang="scss" scoped>
.usual .bus-stop-name {
  font-size: 14px;
}

.usual .bus-flag {
  font-size: 14px;
}

.large .bus-stop-name {
  font-size: 16px;
}

.large .bus-flag {
  font-size: 16px;
}

.el-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// [class*=" el-icon-"],
// [class^="el-icon-"] {
//   font-size: 25px;
//   margin-bottom: 10px;
// }

.mapOptions {
  width: 100%;
  height: 100px !important;
  background: #fff;
  margin-top: 20px;
  text-align: center;

  li {
    box-sizing: border-box;
    // width: 70px;
    padding: 10px 20px;
    height: 70px;
    margin-right: 30px;
  }
}

.aside-bus-info {
  position: absolute;
  // top: 0;
  left: 0;
  z-index: 1;
  width: 380px;
  margin: 10px;
  text-align: left;
  .localInfo {
    padding: 12px;
    background: #fff;
    margin-bottom: 8px;

    .ellipse {
      width: 10px;
      height: 5px;
      border-radius: 50%;
      border: 5px solid #2cd9ff;
    }
  }

  .border-radius-20 {
    border-radius: 20px;
  }
  .h-100 {
    padding-top: 40px;
    height: calc(100vh - 120px) !important;
  }
  .route-planning-box {
    // display: flex;
    box-sizing: border-box;
    padding: 0 10px;
    height: 60vh;
    width: 100%;
    overflow: hidden;

    .left-route-planning::-webkit-scrollbar {
      display: none;
    }

    // 左侧站点信息
    .left-route-planning {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 20px 20px 20px 30px;
      overflow: auto;

      ul {
        margin-bottom: 10px;
        // &:last-child {
        //   .fz-12 {
        //     display: none;
        //   }
        // }
      }

      .blue-cicle {
        width: 14px;
        height: 17px;
        // border-radius: 50%;
        // border: 3px solid #2cd9ff;
        margin-left: 11px;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .bus-stop-name {
        display: flex;
        color: #616161;

        .stated-num {
          display: flex;
          flex: 1;
          // justify-content: space-between;
          box-sizing: border-box;
          margin-top: 30px;
        }
      }

      .bus-flag {
        width: 40px;
        height: 25px;
        line-height: 25px;
        text-align: center;

        background: #1d1d1d;
        color: #888888;
        border-radius: 5px;
      }
    }
  }
}
.end-cicle {
  width: 10px;
  height: 10px;
  border: 3px solid #dadada;
  border-radius: 50%;
  margin-left: -50px;
  margin-top: 10px;
}

.bus-line {
  width: 4px;
  height: 180px;
  margin-top: -20px;
  background: #1d1d1d;
  border-radius: 3px;
}
.car {
  position: relative;
}
.del {
  height: 100%;
  overflow: auto;
}
.del::-webkit-scrollbar {
  display: none;
}

.dotted-solid {
  width: 1px;
  height: 80px;
  margin-left: 17px;
  border-left: 3px dotted #d5d5d5;
}
::v-deep .el-tabs__content {
  overflow: auto;
  height: 500px;
}
::v-deep .el-collapse-item {
  height: auto;
  overflow: auto;
  padding-top: 10px;
}
::v-deep .el-tabs__content::-webkit-scrollbar {
  display: none;
}
::v-deep .el-icon-arrow-right:before {
  content: "";
}
.box-card {
  .current-local {
    display: flex;
    align-items: center;
  }

  .current-local::before {
    content: "";
    display: inline-block;
    height: 8px;
    width: 8px;
    background: #94d48b;
    border-radius: 50%;
    margin-right: 10px;
  }
  .turn-direction{
    display: flex;
    .el-button{
      border: none;
      margin-left: 280px;
    }
    .three-dotted {
        width: 1px;
        height: 20px;
        border-right: 5px dotted #bebdbd;
        content: "";
        display: block;
        margin: 8px 0;
      }
  }
  

  // .current-local::after {
  //   width: 1px;
  //   height: 20px;
  //   border-right: 5px dotted #bebdbd;
  //   content: "";
  //   display: block;
  //   margin: 8px 0;
  // }
  .destination {
    display: flex;
    align-items: center;
  }

  .destination::before {
    content: "";
    display: inline-block;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    margin-left: -5px;
    vertical-align: top;
    background: url("@/assets/images/address.png") no-repeat;
  }

  .progress {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 10px;
    margin-top: 30px;
    overflow: hidden;

    .progress-item1 {
      width: 20%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      background: #bbe4b4;
    }

    .progress-item2 {
      width: 10%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      margin-left: -5px;
      background: #ff7c81;
    }

    .progress-item3 {
      width: 10%;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      margin-left: -5px;
      background: #6f96fa;
    }

    .progress-item4 {
      position: relative;
      z-index: 1;
      width: 20%;
      border-radius: 10px;
      margin-left: -5px;
      background: #84ce79;
    }

    .progress-item5 {
      width: 45%;
      margin-left: -5px;
      background: #bbe4b4;
    }
  }
}

.routeNameUl {
  width: 100%;

  li {
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
    height: 3vw;
    line-height: 4vw;
  }
}

// 地图
.route-map {
  width: 100%;
  height: 860px;
  overflow: hidden;

  #map {
    width: 100%;
    height: 100%;
  }
}

.btn {
  cursor: pointer;
  margin-top: 10px;
  float: right;
}
.time-Style {
  font-size: 16px;
  font-weight: 500;
}
.route-style {
  margin: 20px 0 5px;
  display: flex;

  span {
    font-size: 14px;
    padding: 2px 4px;
    border: 2px solid #409eff;
    margin-right: 5px;
    border-radius: 4px;
  }
}
.describe-style {
  padding: 4px 2px;
  background: #f4f2fa;
  border: 1px solid #ebe7f7;
}
.tr-item {
  padding: 20px 0;
  cursor: pointer;
  border-bottom: 1px solid #e9e6e6;
}
.tr-item:last-child {
  border-bottom: 1px solid transparent;
}
.tr-fixed {
  // position: fixed;
  // top: 90px;
  // background: #fff;
  // z-index: 999;
  // width: 350px;
}
.mt-100 {
  margin-top: 190px;
}
::v-deep .el-tabs__header {
  margin: 0;
}
.h-400 {
  height: 400px;
}
::v-deep .el-collapse-item__header {
  height: auto;
  line-height: 1;
}
::v-deep .el-collapse-item__header {
  padding-bottom: 10px;
}
</style>